<template>
  <div class='xlr'>
    请选择起卦方式

    <div class="list">
      <div class="type">
        <el-button @click="byNowTime">直接起卦</el-button>
      </div>

      <div class="type">
        <el-button @click="showNumberDialog = true">数字起卦</el-button>
      </div>

      <div class="type">
        <el-button @click="showFutureDialog = true">未来时间起卦</el-button>
      </div >

    </div>

    <el-dialog
      v-model="showFutureDialog"
      width="80%"
    >
      <span>请选择未来的时间（阳历）</span>
      <div class="selector">
        <el-date-picker
          v-model="futureForm.date"
          type="date"
          placeholder="选择日期"
          value-format="YYYY-MM-DD"
        />
        <el-select v-model="futureForm.hour" placeholder="小时">
          <el-option v-for="item in HOUR_LIST" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showFutureDialog = false">取消</el-button>
          <el-button type="primary" @click="byFuture">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="showNumberDialog"
      width="80%"
    >
      <span>请输入三个数字</span>
      <div class="input">
        <el-input v-model.number="numberForm.num1" placeholder="数字1" />
        <el-input v-model.number="numberForm.num2" placeholder="数字2" />
        <el-input v-model.number="numberForm.num3" placeholder="数字3" />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showNumberDialog = false">取消</el-button>
          <el-button type="primary" @click="byNum">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>

    <div class="tips">
      本小六壬提供三种方式占卜。
      <ul>
        <li>
          1）不接参数按现在的时间起卜。
        </li>
        <li>
          2）选择未来的年、月、日、时（公历），如 2018 4 15 2。
        </li>
        <li>
          3）自己输入给出三个数字，如  10 2 3。
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import {LiuRen} from './js/index'
import {HOUR_LIST} from './js/model'
import {ref} from 'vue'

console.log(LiuRen, '--LiuRen');

const res = ref('')
const toShow = () => {
  alert(res.value)
}
const byNowTime = () => {
   res.value = LiuRen.nowDateTell()
  console.log(res.value, '--res');
  toShow()
}



const showFutureDialog = ref(false)
const futureForm = ref({
  date: '',
  hour: ''
})
const byFuture = () => {
  showFutureDialog.value = false
  const {date, hour} = futureForm.value
  const list = date.split('-')
  list.push(hour)
  res.value = LiuRen.futureDateTell(...list)
  toShow()
}


const showNumberDialog = ref(false)
const numberForm = ref({
  num1: null,
  num2: null,
  num3: null
})

const byNum = () => {
  const {num1,num2,num3} = numberForm.value
  showFutureDialog.value = false
  res.value = LiuRen.randomThreesTell(num1,num2,num3)
  toShow()
}

</script>


<style lang="scss" scoped>
.xlr {
  box-sizing: border-box;
  padding: 20px;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.list {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  .type {
   flex: 1;
   .el-button {
    width: 100%;
    margin-bottom: 20px;
   }
  }
}

.selector {
  margin: 30px auto;
  display: grid;
  grid-template-columns: 3fr 1fr;
}
.input {
  margin: 30px auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
</style>
